<!-- 多选框 -->
<template>
	<view class="vk-data-input-checkbox">
		<!-- 页面开始 -->
		<u-checkbox-group
			:wrap="wrap"
			:width="width"
			:size="size"
			:active-color="activeColor"
			:iconSize="iconSize"
			:shape="shape"
			:disabled="disabled"
			:max="max"
			@change="onChange"
		>
			<u-checkbox
				v-for="(item, index) in localdata"
				:key="index"
				:value="_itemChecked(item[props.value])"
				:modelValue="_itemChecked(item[props.value])"
				:name="item[props.value]"
				:disabled="item.disabled"
				@input="onItemInput(item[props.value])"
			>
				{{ item[props.label] }}
			</u-checkbox>
		</u-checkbox-group>
		<!-- 页面结束 -->
	</view>
</template>

<script>
export default {
	name: "vk-data-input-checkbox",
	emits: ["update:modelValue", "input"],
	props: {
		// 表单值
		value: {},
		modelValue: {},
		// 数据源
		localdata: {
			type: Array,
			default() {
				return [];
			}
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		wrap: {
			type: Boolean,
			default: false
		},
		width: {
			Type: [String, Number],
			default: "auto"
		},
		size: {
			Type: [String, Number],
			default: 34
		},
		activeColor: {
			Type: String,
			default: "#2979ff"
		},
		iconSize: {
			Type: [String, Number],
			default: 20
		},
		shape: {
			Type: String,
			default: "square"
		},
		max: {
			Type: Number,
			default: 9999
		},
		props:{
			Type: Object,
			default() {
				return {
					value:'value', 
					label:'label' 
				};
			}
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
		
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
	
		},
		// 向父组件发送更新value事件
		_updateValue(value) {
			this.$emit("input", value);
			this.$emit("update:modelValue", value);
		},
		// 监听 - 值改变事件
		onChange(value) {
			this._updateValue(value);
		},
		onItemInput(itemValue) {
			let that = this;
			let { valueCom: value = [] } = that;
			let index = value.indexOf(itemValue);
			if (index > -1) {
				value.splice(index, 1);
			} else {
				value.push(itemValue);
			}
			that._updateValue(value);
		},
		_itemChecked(itemValue) {
			let key = false;
			let that = this;
			let { valueCom: value } = that;
			if (value && value.indexOf(itemValue) > -1) {
				key = true;
			}
			return key;
		}
	},
	// 计算属性
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>

</style>
